<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 通过meta标签,设定读取网络来源图片 -->
  <meta name="referrer" content="never">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
  <style>
    * {
       margin: 0;
      padding: 0;
  }

    ul, li, ol {
      list-style: none;
  }
    .num{
      width: 73px;
      height: 73px;
      font-size: 16px;
      text-align: center;
      display: block;
      margin: 50px 0 0 0;
      font-size: 20px;
      color: #000;
    }

    .jian{
      position: absolute;
      top:0;
      left: 82px;
    }

    .jia{
      position: absolute;
      top:38px;
      left: 82px;
    }
    h1{
      text-align: center;
    }
  </style>
</head>
<body>
<h1>商品详情</h1>

<div class="container"></div>

<script src="../js/jquery.min.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/cookie.js"></script>

<script>
  let obj = myGetUrlValObj();
  let goodMsg;

  console.log(obj);
  const p = new Promise(function(f,r){
    $.ajax({
      url:'../server/goods_detail.php',
      type:'post',
      data:{goods_id:obj.goods_id},
      dataType:'json',
      success:f,
      error:r,
    })
  })
  p.then(function(res){
    goodMsg = res;
    console.log(res);
    let str = '';
    str +=`
    <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">商品详细信息</h3>
        </div>
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="${res.goods_small_logo}" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">${res.goods_name}</h4>
              <p>
                <i class="glyphicon glyphicon-yen"></i>
                <span>${res.goods_price}</span>
              </p>
              <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">XL</button>
                <button type="button" class="btn btn-default">L</button>
                <button type="button" class="btn btn-default">M</button>
                <button type="button" class="btn btn-default">S</button>
                <button type="button" class="btn btn-default">XS</button>
              </div>
              <p style="position:relative">
                  <input value="1" class="num">
                  <button name="-" type="button" class="jian btn btn-default" >-</button>
                  <button name="+" type="button" class="jia btn btn-default">+</button>
              </p>
              <p>
                <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                <a name="inCart" href="JavaScript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
              </p>
            </div>
          </div>
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
            <li role="presentation"><a href="#">商品参数信息</a></li>
            <li role="presentation"><a href="#">相关商品</a></li>
          </ul>
          <div>
            ${res.goods_introduce}
          </div>
        </div>
      </div>
    `;
    $('.container').html(str);
  })

  // 点击事件-事件委托
  $('.container').click(function(e){
    // 点击购物车
    if(e.target.getAttribute('name')==='inCart'){
      let cookieObj =  myGetCookie();
      if(cookieObj.login === undefined){
        window.alert('请您先登录');
        window.location.href = `./login.html?url=${window.location.href}`;
      }else{
        if( ($('.num').val() - 0 < 1)||($('.num').val() -0 > goodMsg.goods_number-0)){
          window.alert( `您的购买数量有误,必须是大于1 小于${goodMsg.goods_number}`);
          if($('.num').val() - 0 === 1){
            console.log($('.num').val());
            $('[name="-"]').prop('disabled',true);
            $('[name="+"]').prop('disabled',false);
          }else if($('.num').val() -0 >= goodMsg.goods_number-0){
            $('.num').val(goodMsg.goods_number-0);
            $('[name="-"]').prop('disabled',false);
            $('[name="+"]').prop('disabled',true);
          }
          return;
        }

        let cart =localStorage.cart;
        if(cart === undefined){
          goodMsg.num = $('.num').val();
          goodMsg.buy = true;
          const arr =[];
          arr.unshift(goodMsg);
          localStorage.cart=JSON.stringify(arr);
        }else{
          cart = JSON.parse(cart);
          let bool = cart.some(function(item){
            return item.goods_id === goodMsg.goods_id;
          })
          if(bool){
            for(let i = 0 ; i <= cart.length-1 ; i++){
              if(cart[i].goods_id === goodMsg.goods_id){
                cart[i].num++;
                break;
              }
            }
          }else{
            goodMsg.num = $('.num').val();
            goodMsg.buy = true;
            cart.unshift( goodMsg ); 
          }
          localStorage.cart = JSON.stringify( cart );
        }
        window.location.href = './cart.html';
      }
    }else if(e.target.getAttribute('name')==='-'){
      $('.num').val(($('.num').val())-1);
      if($('.num').val() < 2){
        $('[name="-"]').prop('disabled',true);
      }
        $('[name="+"]').prop('disabled',false);
    }else if(e.target.getAttribute('name')==='+'){
      $('.num').val(($('.num').val())-0+1);
      if($('.num').val() > goodMsg.goods_number - 0 - 1){
        $('[name="+"]').prop('disabled',true);
      }
        $('[name="-"]').prop('disabled',false);
    }
  })
</script>

</body>
</html>
